<template>
  <section>
    <el-form :model="model" label-width="auto">
      <el-row :gutter="getGutter">
        <el-col
          v-for="formColumn in getFormColumns"
          :key="formColumn.prop"
          v-bind="formColumn.colProps"
        >
          <el-form-item>
            <template #label>
              <span>{{ formColumn.ariaLabel }}</span>
            </template>
            <!-- 通过 v-bind  将 componentProps 透传到组件内部，而无法直接使用到根节点的属性，组件内部将作为props接收 -->
            <component
              :is="getComponent(formColumn.component)"
              v-model="model[formColumn.prop]"
              v-bind="formColumn.componentProps"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 传递给is的如果是组件名称，则需要注册，如果是组件，则不需要 -->
    <!-- 动态绑定is，如果该方法是组合式函数内的，则会失去类型批注-->
  </section>
</template>
<script lang="ts" setup>
import { getComponent } from "./componentMap";
import { FormMethods } from "./hooks/useFormMethods";
import { FormModel } from "./hooks/useFormModel";
const emits = defineEmits(["register"]);
const { model, getFormColumns, getGutter } = FormModel.getInstance();
const methods = FormMethods.getInstance();

onMounted(() => {
  emits("register", methods);
});
</script>
